import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from '@iux/live';

const TreeData: TreeNode[] = [
  {
    label: 'root node 1',
    disabled: true,
    expanded: true,
    children: [
      {
        label: 'child node 1-1 long long long long long long long long long long long long name.doc',
        expanded: true,
        children: [
          { label: 'Leaf node 1-1-1', isLeaf: true },
          { label: 'Leaf node 1-1-2', isLeaf: true },
        ],
      },
      {
        label: 'child node 1-2',
        children: [
          { label: 'Leaf node 1-2-1', isLeaf: true },
          { label: 'Leaf node 1-2-2', isLeaf: true },
        ],
      },
    ],
  },
  {
    label: 'root node 2',
    children: [
      {
        label: 'Leaf node 2-1',
        isLeaf: true,
      },
      {
        label: 'child node 2-2',
        children: [
          { label: 'Leaf node 2-2-1', isLeaf: true },
          { label: 'Leaf node 2-2-2', isLeaf: true },
        ],
      },
    ],
  },
  {
    label: 'root node 3',
    children: [
      {
        label: 'Leaf node 3-1',
        isLeaf: true,
      },
      {
        label: 'Leaf node 3-2',
        isLeaf: true,
      },
    ],
  },
];

@Component({
  templateUrl: './basic.component.html',
  styles: [
    `
      .treeselect-container {
        width: 3.68rem;
      }
      p {
        margin-top: 0.08rem;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BasicComponent {
  treeData: TreeNode[] = TreeData;
  selection: TreeNode[];

  onChange(event) {
    console.log('selection:', event);
  }

  expandedChange(event) {
    console.log('expandedChange:', event);
  }

  openChange(event) {
    console.log('openChange:', event);
  }
}
